/* ============================================
   自定义全局样式
   ============================================ */

page {
  background-color: #F5F5F5;
  color: #333333;
  font-size: 28rpx;
  line-height: 1.5;
}

/* ============================================
   安全区适配
   ============================================ */

.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-top {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

/* ============================================
   主题颜色
   ============================================ */

/* 主色调 - 蓝色 #4A90E2 */
.text-primary { color: #4A90E2; }
.bg-primary { background-color: #4A90E2; }
.border-primary { border-color: #4A90E2; }

/* 成功色 - 绿色 #27AE60 */
.text-success { color: #27AE60; }
.bg-success { background-color: #27AE60; }
.border-success { border-color: #27AE60; }

/* 警告色 - 橙色 #E67E22 */
.text-warning { color: #E67E22; }
.bg-warning { background-color: #E67E22; }
.border-warning { border-color: #E67E22; }

/* 危险色 - 红色 #E74C3C */
.text-danger { color: #E74C3C; }
.bg-danger { background-color: #E74C3C; }
.border-danger { border-color: #E74C3C; }

/* 信息色 - 蓝色 #3498DB */
.text-info { color: #3498DB; }
.bg-info { background-color: #3498DB; }
.border-info { border-color: #3498DB; }

/* ============================================
   主题样式变量 - 圆角系统
   ============================================ */

/* 微信小程序使用 page 作为根元素 */
page {
  /* 圆角尺寸 */
  --radius-xs: 4rpx;      /* 极小圆角 */
  --radius-sm: 8rpx;     /* 小圆角 */
  --radius-md: 20rpx;     /* 中等圆角 */
  --radius-lg: 40rpx;     /* 大圆角 */
  --radius-xl: 50rpx;     /* 超大圆角 */
  --radius-2xl: 100rpx;    /* 特大圆角 */
  --radius-full: 9999rpx; /* 完全圆形 */
  
  /* 阴影 */
  --shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 12rpx 32rpx rgba(0, 0, 0, 0.2);
  
  /* 过渡时间 */
  --transition-fast: 0.15s;
  --transition-base: 0.3s;
  --transition-slow: 0.5s;
  
  /* 动画缓动函数 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 兼容性：同时定义在 :root 中（用于 H5 等平台） */
:root {
  /* 圆角尺寸 */
  --radius-xs: 4rpx;
  --radius-sm: 8rpx;
  --radius-md: 20rpx;
  --radius-lg: 40rpx;
  --radius-xl: 50rpx;
  --radius-2xl: 100rpx;
  --radius-full: 9999rpx;
  
  /* 阴影 */
  --shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 12rpx 32rpx rgba(0, 0, 0, 0.2);
  
  /* 过渡时间 */
  --transition-fast: 0.15s;
  --transition-base: 0.3s;
  --transition-slow: 0.5s;
  
  /* 动画缓动函数 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   卡片基础样式
   ============================================ */

.card {
  background-color: #fff;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out);
}

/* 卡片尺寸变体 */
.card-sm {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.card-lg {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.card-xl {
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

/* ============================================
   卡片点击动画 - 从中间向四周展开
   ============================================ */

/* 动画关键帧 - 从中心缩放展开 */
@keyframes card-reveal {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 动画关键帧 - 点击时的涟漪效果 */
@keyframes card-ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* 可点击卡片容器 */
.card-clickable {
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* 点击时的涟漪效果层 */
.card-clickable::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* 卡片点击动画类 */
.card-animate {
  animation: card-reveal var(--transition-base) var(--ease-out);
}

/* 点击时触发涟漪动画 */
.card-clickable:active::before {
  width: 200%;
  height: 200%;
  animation: card-ripple var(--transition-base) var(--ease-out);
  opacity: 1;
}

/* 点击时的缩放反馈 */
.card-clickable:active {
  transform: scale(0.98);
}

/* 卡片内容容器 - 用于延迟显示内容 */
.card-content {
  position: relative;
  z-index: 1;
  animation: card-reveal var(--transition-base) var(--ease-out);
}

/* ============================================
   圆角工具类
   ============================================ */

.rounded-xs { border-radius: var(--radius-xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* 圆角方向 */
.rounded-t { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.rounded-b { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
.rounded-l { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); }
.rounded-r { border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }

/* ============================================
   阴影工具类
   ============================================ */

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none; }

/* ============================================
   过渡动画工具类
   ============================================ */

.transition-fast { transition: all var(--transition-fast) var(--ease-out); }
.transition-base { transition: all var(--transition-base) var(--ease-out); }
.transition-slow { transition: all var(--transition-slow) var(--ease-out); }

/* ============================================
   卡片组合样式 - 常用场景
   ============================================ */

/* 基础卡片 */
.card-base {
  background-color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
  padding: 30rpx;
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out);
}

/* 可点击卡片 */
.card-interactive {
  background-color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
  padding: 30rpx;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out);
}

.card-interactive::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.card-interactive:active::before {
  width: 200%;
  height: 200%;
  animation: card-ripple var(--transition-base) var(--ease-out);
  opacity: 1;
}

.card-interactive:active {
  transform: scale(0.98);
}

/* 列表项卡片 */
.card-list-item {
  background-color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
  padding: 24rpx 30rpx;
  margin-bottom: 20rpx;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out);
}

.card-list-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.card-list-item:active::before {
  width: 200%;
  height: 200%;
  animation: card-ripple var(--transition-base) var(--ease-out);
  opacity: 1;
}

.card-list-item:active {
  transform: scale(0.98);
}

/* 图片卡片 */
.card-image {
  background-color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
  padding: 0;
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out);
}

.card-image .card-content {
  padding: 30rpx;
}

/* 悬浮卡片效果 */
.card-hover {
  background-color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out);
}

.card-hover:hover {
  transform: translateY(-4rpx);
  box-shadow: var(--shadow-lg);
}

/* ============================================
   使用示例说明（注释）
   ============================================
   
   基础用法：
   <view class="card card-animate">
     <view class="card-content">卡片内容</view>
   </view>
   
   可点击卡片：
   <view class="card card-clickable" @tap="handleClick">
     <view class="card-content">点击我</view>
   </view>
   
   自定义圆角：
   <view class="card rounded-xl">大圆角卡片</view>
   
   组合使用：
   <view class="card-interactive rounded-2xl shadow-lg">
     <view class="card-content">可点击的大圆角卡片</view>
   </view>
   
   ============================================ */

